<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    <div>
        <button ng-click="togglehide()">hide隐藏/显示</button>

        <p ng-hide="myVarhide">
        名: <input type=text ng-model="firstName"><br>
        姓: <input type=text ng-model="lastName"><br><br>
        姓名: {{firstName + " " + lastName}}
        </p>
    </div>
    <div>
        <button ng-click="toggleshow()">show隐藏/显示</button>

        <p ng-show="myVarshow">
        名: <input type="text" ng-model="firstName"><br>
        姓: <input type="text" ng-model="lastName"><br>
        <br>
        姓名: {{firstName + " " + lastName}}
        </p>
    </div>
    <button ng-click="count = count + 1">点我！</button>

    <p>{{ count }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.myVarhide = false;
    $scope.myVarshow = true;
    $scope.togglehide = function() {
        $scope.myVarhide = !$scope.myVarhide;
    }
    $scope.toggleshow = function() {
        $scope.myVarshow = !$scope.myVarshow;
    }

    $scope.count = 0;
});
</script>

</body>
</html>